<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%
    String path = request.getContextPath();      //上下文路径，/mldn
//请求方式                    服务器名，地址                          端口
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <title>中秋博饼</title>


  </head>

  <body style="background-image:url(<%=request.getContextPath()%>/images/bobing1.jpg);
        background-repeat: repeat;
        background-size:cover;background-color: #3F6E74">

    <div class="container">
        <form>
        <div style="margin:0 auto;">
            <h2 class="form-signin-heading" style="color:#4CC3FF">博饼活动</h2>
            <div id="user_nickname_div">
                <label for="s_name">姓名</label>
                <input style="height: 150%; display:inline" type="text" id="s_name"  class="form-control" placeholder="姓名" required autofocus>
            </div><br>
            <div id="user_name_div">
                <label for="s_number">电话</label>
                <input type="text" id="s_number"  class="form-control" maxlength="15" minlength="4" class="form-control" placeholder="电话" required autofocus>
                <span id="user_name_msg"></span>
            </div><br>
            <button type="button" onclick="affirm()" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">开始博饼</button>
            <%--<button type="button" class="btn btn-warning">查询记录</button>--%>
        </div>
        </form>
    </div>

    <script>
        //去掉alert域名显示
        (function(){
            window.alert = function(name){
                var iframe = document.createElement("IFRAME");
                iframe.style.display="none";
                iframe.setAttribute("src", 'data:text/plain');
                document.documentElement.appendChild(iframe);
                window.frames[0].window.alert(name);
                iframe.parentNode.removeChild(iframe);
            }
        })();


        function affirm(){
            var s_number = $("#s_number").val();
            var s_name = $("#s_name").val();
            // $("#affirm_number").append(s_number);
            $("#affirm_number").text(s_number);
            // $("#affirm_name").append(s_name);
            $("#affirm_name").text(s_name);


        }

        function start(){
            var s_number = $("#s_number").val();
            var s_name = $("#s_name").val();
            // 存储
            localStorage.setItem("s_number", s_number);
            localStorage.setItem("s_name", s_name);
            //进行学号姓名检测
            var rule = /^0?1[3|4|5|8|6|7|9][0-9]\d{8}$/;
            //姓名检测
            var rule_name = /^.*\w+.*$/;
            var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
            if(!rule.test(s_number)){
                alert("请输入正确的电话");
            }else if(!reg.test(s_name) | rule_name.test(s_name)){
                alert("请输入合法的姓名");
            }
            else{
                window.location.href="/zkw_blog/bobing/index";
            }

        }

        function isCh(str) {
            var reg=/^[/u4E00//-/u9FA5]+$/;
            if (!reg.test(str)){
                // alert( "不全是中文" );
                return false ;
            }else{
                // alert( "全是中文" );
                return true ;
            }
        }
    </script>

    <script type="text/javascript">
    $('#myModal').on('shown.bs.modal', function () {
          $('#myInput').focus()
        })
    </script>
     
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="exampleModalLabel">确认框</h4>
          </div>
          <div class="modal-body">
            <form>
               <div class="form-group">
                <label for="message-text" class="control-label" style="color:#ff79c6;">请输入正确的姓名电话，活动结束凭姓名电话领奖</label>
                   <div id="affirm_name" style="font-size: 150%">姓名：</div>
                   <div id="affirm_number" style="font-size: 150%">电话：</div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
            <button type="button" class="btn btn-primary" onclick="start()">确认</button>
          </div>
        </div>
      </div>
    </div>



    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
